<template>

<div class="visitingCard">
      <section class="chj_card_header">
      	<a class="gd1_a" href="javascript:;" @click="back()"></a>
      	<h3>名片</h3>
      </section>



  <div class="chj_card_box">
        <div class="chj_card">
          <div class="top">
            <div class="top_left">
              <h5 class="h5"> {{card_data.username}}</h5>
              <p class="p1">{{card_data.major}}</p>
              <p class="p2">知了壳（大望路分公司）</p>
            </div>
            <div class="top_right">
              <div class="top_right_pic"><img :src="'https://exam.zhonghaiqihang.com'+card_data.specialavatartwo" alt=""></div>
            </div>
          </div>
          <div class="bottom">
            <p class="p1">{{card_data.mobile}}</p>
            <p class="p2">北京朝阳区建国路15号院甲1号华文国际<br>传媒大厦A座1007-1012</p>
          </div>
        </div>
  </div>
      <div class="chj_card_zyyw">
          <section class="sy sy4">
            <h3>主营业务</h3>
            <div>
              <ul>
                <li  @click="xqymtz(data.id,data.id)" v-for="(data,id) in title.index.gscsData" :key="id"><img :src="id==0?'/img/m-sy41.png':'https://exam.zhonghaiqihang.com/'+data.oneiconimg">
                  <h4>{{data.servicename}}</h4>
                  <p>{{data.remark}}</p>
                </li>
              </ul>
            </div>
          </section>
      </div>



      <div class="chj_card_ljzx af">
        <a class='chj_card_ljzx_a1' :href="'tel:'+card_data.mobile">拨打电话</a>
        <a  @click='card_wx()' class='chj_card_ljzx_a2' href="JavaScript:;">加微信</a>
      </div>

      <div class="card_menu" @click="card_hide()">
         <a class="card_down" href="JavaScript:;" @click.stop="doSomething($event)"><img :src="'https://exam.zhonghaiqihang.com'+card_data.twocode" alt=""></a>
      </div>


</div>




</template>

<script>
  import axios from 'axios';
  import $ from 'jquery';

export default {
    data(){
      return {

      }
    },
  async asyncData ({ params }) {
    let nh2 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Index/indexData`);
    let nh3 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Receptionist/receptionistData`);
    let data  = {index:nh2.data,imgs:nh3.data};
    return {
      title: data,
       card_data :'',


    }




  },
  head(){
    return {
      title: '',
      meta: [
        { hid: 'description', name: 'description', content: ''},
        { hid: 'keywords', name: 'keywords', content:'' }
      ]
    }
  },

  mounted:function(){


    var _this = this

    for(var i=0;i<_this.title.imgs.length;i++){
      if(_this.title.imgs[i].id == _this.$route.params.id){
        _this.card_data = _this.title.imgs[i]
      }
    }

    console.log(_this.card_data)


    // console.log(_this)

    $('.visitingCard').siblings('#head').hide()
    $('.visitingCard').siblings('.dbct').hide()
    $('.visitingCard').siblings('footer').hide()
  },
  methods:{
   card_hide:function(){
      $('.card_menu').css('display','none')
   },

   back:function(){
     this.$router.go(-1);
   },
  
    doSomething:function(event){
       if(event) {
          event.stopPropagation ? event.stopPropagation(): event.cancelBubble = true;
        }
    },

    xqymtz:function(e1,e2){
      $('.visitingCard').siblings('#head').show()
      $('.visitingCard').siblings('.dbct').show()
      $('.visitingCard').siblings('footer').show()
      let href = '/Mobile/ServiceDetails/'+e1+'?name='+e2;
      this.$router.push(href)
    },
    card_wx:function(){
      var _this = this

       $('.card_menu').css('display','flex')

    }



  },




}







</script>

<style>



</style>
